<template>
  <div class="noticeDetail">
    <div class="pageheader">
      <XHeader :left-options="{backText:''}" :title="title" class="XHeader"></XHeader>
    </div>
    <div class="noticeDetail-content">
      <div class="noticeDetail-content-head">
        <div class="noticeDetail-content-head-title">
          <p>{{detail.n_title}}</p>
        </div>
        <div class="noticeDetail-content-head-time">{{detail.n_create_at}}</div>
      </div>
      <div class="noticeDetail-content-body" v-html="detail.n_content"></div>
    </div>
  </div>
</template>

<script>
  import Notice from '../../../../dll/notice'

  export default {
    name: 'noticeDetail',
    data () {
      return {
        title: '公告详情',
        detail: {},
        id: this.$route.params.id
      }
    },

    created () {
      this.getNoticeDetail()
    },

    methods: {
      async getNoticeDetail () {
        this.$vux.loading.show({
          text: '加载中'
        })
        let res = await Notice.getNoticeDetail({ id: this.id })
        this.$vux.loading.hide()
        if (res.code == 0) {
          this.detail = res.data
        }
      }
    }
  }
</script>

<style lang="less">
  .noticeDetail {
    .noticeDetail-content {
      padding: 20px 10px 10px;
      /*background: rgba(242, 242, 242, 1);*/
      font-size: 14px;

      .noticeDetail-content-head {
        border-bottom: 1px solid #e4e4e4;
        margin-bottom: 10px;
        padding-bottom: 10px;

        .noticeDetail-content-head-title {
          font-weight: bold;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 16px;
        }

        .noticeDetail-content-head-time {
          text-align: right;
          color: rgba(0, 0, 0, 0.5);
        }
      }

      .noticeDetail-content-body {
        overflow: hidden;

        * {
          font-size: 13px !important;
          line-height: 22px;
          max-width: 100% !important;
        }
      }
    }
  }
</style>
